import React, { Component } from 'react'

import {
  Top10Wrap
} from './StyledCookBook'

const Top10 = ({list}) => {
  return (
    <Top10Wrap>
      <h2>精品好菜</h2>
      <ul>
        {
          list.slice(0, 10).map((item) => {
            return (
              <li
                key={item.id}
              >
                <img src={item.img} alt={item.name}/>
                <div>
                  <p>{item.name}</p>
                  <p>{item.all_click}浏览 {item.favorites}收藏</p>
                </div>
              </li>
            )
          })
        }
      </ul>
    </Top10Wrap>
  )
}

export default Top10
